<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品添加</title>
<!-- BEGIN 页面公共文件 -->
<load href="__COMMON__/css/init.css" />
<load href="__COMMON__/css/font-icons.css" />
<load href="__COMMON__/js/jquery.min.js" />
<!-- END 页面公共文件 -->


<!-- BEGIN 当前页面的css 和js -->
<load href="__COMMON__/css/tools/easydialog.css" />
<load href="__ADMIN_CSS__/common.css" />
<load href="__ADMIN_CSS__/goods/attr_add.css" />

<load href="__COMMON__/js/tools/easydialog.min.js" />
<load href="__COMMON__/js/tools/Validator.js" />
<!-- END 当前页面的css 和js -->
</head>
<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="{:U('Index/main')}">首页</a></li>
    <li><a href="javascript:void(0)">产品属性添加</a></li>
    </ul>
    <a class="reload" href="javascript:void(0)" onclick="window.location.reload()"><i class="fa fa-refresh"></i>重载此页面</a>
    </div>
<style>
.no_data{
	margin-top: 15px;
	line-height: 80px;
	max-width: 600px;
}
.no_data p{
	font-size: 16px;
	color: #898989;	
	text-align: center;
}
.no_data p a{
	padding: 5px 8px;
	background: #009FB3;
	color: #FFF;
}
.goodsalbum{
	border: 1px dotted #898989;
	float: left;
	max-width: 510px;
	padding: 8px;
	padding-bottom: 0;
}  
.forminfo select{
	height: 35px;
	border: 1px solid #A7B5BC;
	min-width: 120px;
}
.forminfo input.attrvalues{
	resize: none;
	width: 330px;
	height: 50px;
	padding: 10px;
}
</style>
    <div class="formbody">
    <div class="formtitle">
    	<span>产品属性信息添加</span>
		<a href="{:U('Goods/attribute')}"><i class="fa fa-reply"></i>返回属性列表</a>
		</div>    
<if condition="$isAddUsed">
    <ul class="forminfo">
    <li><label><b>*</b>属性名称</label><input name="attrname" type="text" class="dfinput" maxlength="20" /><i placeholder="标题不小于2个字符且不能超过20个字符" >标题不小于2个字符且不能超过20个字符</i></li>
    <li><label><b>*</b>所属分类</label>
		<select name="cateid">
			<option value="0">---选择分类---</option>
			<if condition="$cates">			
			<foreach name="cates" item="cate">
			<option value="{$cate.id}"<eq name="cid" value="$cate.id">selected="selected"</eq>>{$cate.separatechar}{$cate.catename}</option>
			</foreach>
			</if>			
		</select>
	<i placeholder="请选择该属性所属的分类" >请选择该属性所属的分类</i></li>
    <li><label><b>*</b>挂载方式</label>
    	<select name="attrinputtype">
			<option value="">--选择挂载方式--</option>
			<option value="1" placeholder="添加商品时，将以单选按钮展示">属性值单选</option>
			<option value="3" placeholder="添加商品时，将以下拉框展示">属性值多选</option>
			<option value="4" placeholder="添加商品时，将以显示文本输入框">手工录入</option>
		</select>
		<i placeholder="请选择此属性的展现方式">请选择此属性的展现方式</i>
	</li>   	
	<li class="attrvalue">
		<label><b>*</b>属　性　值</label>
		<input name="attrvalues" type="text" class="dfinput" />
		<i placeholder="请输入此属性对应的属性值，多个值请用“|”隔开，如：白色|黄色|绿色">请输入此属性对应的属性值，多个值请用“|”隔开，如：白色|黄色|绿色</i>
	</li> 
	 <li>
    <label><b>&nbsp;</b>排序设置</label>
    <input name="sortorder" type="text" class="dfinput sort" value="10" />
    <i placeholder="请输入整数">请输入整数</i>
    </li>    
    <li><label>&nbsp;</label><input name="submit" type="button" class="submit submitable" value="添加属性" />
	<i placeholder=""></i>
	</li>
    </ul>
<else />
<div class="no_data">
<p>暂无法添加属性选项，添加属性前，需要在“产品分类管理”中添加分类后方可添加产品属性信息。</p>
<p><a href="{:U('Goods/cateAdd')}">点击进入产品分类管理</a></p>
</div>
</if>
</div>
</body>
</html>
<script type="text/javascript">
var $postUrl="{:U('Goods/attrAdd')}";
/******************* BEGIN 数据处理区**************************/
var $attrname=$('input[name="attrname"]'),
	  $cateid=$('select[name="cateid"]'),
	  $attrinputtype=$('select[name="attrinputtype"]'),
	  $attrvalues=$('input[name="attrvalues"]'),
	  $sortorder=$('input[name="sortorder"]');
	  
$sortorder.blur(function (){
	getNumber($(this));
})

$('input[name="submit"]').click(function (){
	var $this=$(this);
	//if($this.hasClass("submit-disable")) return false;
	var bool_attrvalues=true;
	var bool_cateid=  true;
	var bool_attrinputtype=  true;
	var bool_attrname=func_attrname($attrname);
	if($cateid.val()<=0){
		setTips($cateid, "请选择一个分类！");
		bool_cateid=false;
	}else{
		setTips($cateid,'',true);
	}
	if($attrinputtype.val()<=0){
		setTips($attrinputtype, "请选择一个属性挂在类型！");	
		bool_attrinputtype=false;
	}else{
		setTips($attrinputtype,'',true);
	}
	if($attrinputtype.val()!=4){
		if ($attrvalues.val()==''){
			setTips($attrvalues, "请设置属性值，多个值用“|”隔开！");	
			 bool_attrvalues=false;
		}else{
			setTips($attrvalues,'',true);
		}
	}
	if(bool_attrname && bool_cateid && bool_attrinputtype && bool_attrvalues){
		var $data={
				attrname: $attrname.val(),
				cateid: $cateid.val(),
				attrinputtype: $attrinputtype.val(),
				attrvalues: $attrvalues.val(),
				sortorder: $sortorder.val()
		}
		$this.siblings("i").html('<span class="doing">正在提交，请稍后……</span>');
		$this.removeClass("submitable").addClass("submit-disable");
		$.post($postUrl,$data, function (back){
			if(back.status==1){
				easyDialog.open({
					container : {
						header : "消息提醒窗口",
						content : "成功增加一个产品属性，你可以：<br />前往查看属性列表，或者继续添加属性！",
						yesFn : function() {
							window.location.href = window.location.href;
						},
						noFn : function() {
							window.location.href = back.redirecturl;
						}
					}
				});
				$("#easyDialogYesBtn").text("继续添加");
				$("#easyDialogNoBtn").text("查看列表");
			}else{
				var time= (back.waittime) ? back.waittime*1000 : 3000;				
				easyDialog.open({
					container : {
						header: '消息提醒窗口',
						content : back.data
					},
					autoClose : time
				});				
			}
			$this.siblings("i").html('');
			$this.removeClass("submit-disable").addClass("submitable");
		}, 'json')
	}else{
		setTips($(this), "表单数据还有错误，请检查！");
		return false;
	}
})

/******************* END 数据处理区**************************/

/******************* BEGIN 效果展现区**************************/
$attrinputtype.change(function (){
	if($(this).val()==4){
		$('.forminfo li.attrvalue').stop().slideUp(150);
	}else{
		$('.forminfo li.attrvalue').stop().slideDown(150);		
	}
})

/******************* END 效果展现区**************************/

/******************* BEGIN 函数集成**************************/
 function func_attrname(o){
	var value=o.val();
	if (is_empty(value)) {
		setTips(o, "属性名称不能为空！");
		return false;
	} else {
		if (has_length_error(value, 2, 20)) {
			setTips(o, "名称长度为2-20个字符，请检查！");
			return false;
		} else {
			setTips(o, "", true);
			return true;
		}
	}
}
function getNumber(o){
	var value=trimValue(o.val());
	value = value.replace(/[^0-9]/ig,"");
	var reg=/\d/g;
	if(reg.test(value))
	o.val(value);
	else
	o.val(10);
}
function setTips(o, tips, isDef) {
	isDef = (isDef == null) ? false : true;
	o.siblings("i").html("");
	if (isDef) {
		if ("" !== tips) {
			var defTips = tips;
		} else {
			var defTips = o.siblings("i").attr("placeholder");
		}
		if (typeof defTips == "undefined") {
			defTips = "通过校验";
		}
		o.siblings("i").text(defTips);
	} else {
		o.siblings("i").html('<i style="color: #DD2D28;font-size:15px;padding-right: 5px;" class="fa fa-exclamation-circle"></i><span style="color: #D31B26;">'+ tips + "</span>");
	}
}

/******************* END 函数集成**************************/

</script>

